<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import align from '../widget.align.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Pagebar',
        remark: '翻页工具条',
        extends: [align],
        deprecate: 'br',
        attrs: [{
            name: 'limit',
            type: 'Number',
            remark: '每页条数',
          },
          {
            name: 'offset',
            type: 'Number',
            remark: '当前页偏移量',
          },
          {
            name: 'size',
            type: 'Number',
            remark: '总条数',
          },
          {
            name: 'button-count',
            type: 'Number',
            remark: '数字页数按钮的数量',
          },
          {
            name: 'no-first-last',
            type: 'Boolean',
            remark: '不显示"首页"和"尾页"两个按钮',
            default: '',
          },
          {
            name: 'face',
            type: 'String',
            remark: '样式',
            option: '<var>normal</var><var>mini</var><var>button</var><var>simple</var>',
            default: 'normal',
          },
          {
            name: 'name',
            type: 'String',
            remark: '如果设置了name，将生成一个隐藏表单项，值为当前页数',
            default: '',
          },
          {
            name: 'jump',
            type: 'Boolean',
            remark: '显示一个可填写页数的表单',
            default: '',
          },
        ],
        events: [{
          name: 'click:item',
          remark: '点击翻页按钮时触发',
          option: '(event: Event, offset: Number)',
        }],
        examples: [{
          remark: '小型翻页',
          type: 'html',
          view: true,
          code: `
              <w-pagebar limit="10" size="100" :offset="0" face="mini"></w-pagebar>
            `
        }, {
          remark: '点击翻页切换页数',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-pagebar limit="10" size="100" :offset="offset" @click:item="change"></w-pagebar>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    offset: 0
                  }
                },
                methods: {
                  change(e, value) {
                    this.offset = value
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    offset: 0
						  }
						},
						methods: {
						  change(e, value) {
						    this.offset = value
						  }
						}
					}
        }]
      }

    },
    created() {
      this.merge([{
        name: 'valign',
        default: 'middle'
      }, ], 'attrs')
    }
  }
</script>

<style>
</style>
